<!-- 用户管理 -->
<template>
  <div class="app-container">
    <!-- 用户列表 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input v-model="queryParams.keywords" placeholder="用户名/昵称/手机号" clearable style="width: 200px"
            @keyup.enter="handleQuery" />
        </el-form-item>

        <el-form-item label="审核状态" prop="audit">
          <el-select v-model="queryParams.audit" placeholder="全部" clearable class="!w-[200px]">
            <el-option label="全部" :value="0" />
            <el-option label="待审核" :value="1" />
            <el-option label="已通过" :value="2" />
            <el-option label="已驳回" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <div class="flex-x-between">
          <div>
            <el-button v-hasPerm="['nwk/add']" type="success" @click="handleOpenDialog()">
              <i-ep-plus />
              新增
            </el-button>
            <el-button v-hasPerm="['nwk/del']" type="danger" :disabled="removeIds.length === 0" @click="handleDelete()">
              <i-ep-delete />
              删除
            </el-button>
          </div>
        </div>
      </template>

      <el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="编号" align="center" type="index" width="80" />
        <el-table-column label="头像" align="center" width="80">
          <template #default="{ row }">
            <el-image preview-teleported style="width: 60px; height: 60px" :src="row.avatar" :zoom-rate="1.2"
              :max-scale="7" :min-scale="0.2" :preview-src-list="[row.avatar]" :initial-index="1"
              fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="name" width="80" />
        <el-table-column label="手机号" align="center" prop="tel" width="120">
          <template #default="{ row }">
            <span @click="handleInfo(row.id)" class="text-[#4080FF] cursor-pointer">{{ row.tel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="70">
          <template #default="scope">
            <span v-if="scope.row.sex == 0">男</span>
            <span v-else-if="scope.row.sex == 1">女</span>
          </template>
        </el-table-column>
        <el-table-column label="求职城市" align="center" prop="area_name" width="120" />
        <el-table-column label="薪资要求(最低 - 最高)" align="center" prop="money_min" width="200">
          <template #default="scope">
            <span v-if="scope.row.money_min">{{ scope.row.money_min }}</span>
            <span>-</span>
            <span v-if="scope.row.money_max">{{ scope.row.money_max }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行业" align="center" prop="in_name" width="120" />
        <el-table-column label="审核状态" align="center" width="100">
          <template #default="scope">
            <span v-if="scope.row.audit == 0">待审核</span>
            <span v-else-if="scope.row.audit == 1">已通过</span>
            <span v-else-if="scope.row.audit == 2">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" width="180">
          <template #default="scope">
            <template v-if="scope.row.audit_time > 0">
              {{ formatTimestamp(scope.row.audit_time * 1000) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否上线" align="center" prop="is_show" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status == 0 ? 'success' : 'info'">
              {{ scope.row.status == 0 ? "显示" : "隐藏" }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" width="180">
          <template #default="scope">
            <template v-if="scope.row.created_at > 0">
              {{ formatTimestamp(scope.row.created_at * 1000) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
          <template #default="scope">
            <!-- <el-button type="primary" link size="small" @click="handleInfo(scope.row.id)">
              <i-ep-Tickets />
              详情
            </el-button> -->
            <el-button v-hasPerm="['nwk/edit']" type="primary" link size="small"
              @click="handleOpenDialog(scope.row.id)">
              <i-ep-edit />
              编辑
            </el-button>
            <el-button v-hasPerm="['nwk/del']" type="danger" link size="small" @click="handleDelete(scope.row.id)">
              <i-ep-delete />
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 用户表单弹窗 -->
    <el-drawer v-model="dialog.visible" size="50%" :title="dialog.title" append-to-body @close="handleCloseDialog">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="头像" prop="avatars">
              <image-upload v-if="dialog.visible" :limit="1" v-model="formData.avatars" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex">
                <el-radio :value="0">男</el-radio>
                <el-radio :value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="我的身份" prop="identity">
              <el-select v-model="formData.identity" clearable filterable placeholder="请选择我的身份">
                <el-option label="职场人" :value="0" />
                <el-option label="学生" :value="1" />
                <el-option label="职场大牛" :value="2" />
                <el-option label="管理层" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="date-picker">
              <el-form-item label="参加工作时间" prop="working_hours">
                <el-date-picker value-format="x" v-model="formData.working_hours" type="date" placeholder="请选择参加工作时间" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="tel">
              <el-input v-model="formData.tel" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="formData.qq" placeholder="请输入QQ号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信" prop="wechat">
              <el-input v-model="formData.wechat" placeholder="请输入微信号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱号" prop="emil">
              <el-input v-model="formData.emil" placeholder="请输入邮箱号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="求职类型" prop="job_seeking_type">
              <el-select v-model="formData.job_seeking_type" clearable filterable placeholder="请选择求职状态">
                <el-option label="全职" :value="0" />
                <el-option label="兼职" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="求职状态" prop="job_seeking_status">
              <el-select v-model="formData.job_seeking_status" clearable filterable placeholder="请选择求职状态">
                <el-option label="离职随时到岗" :value="0" />
                <el-option label="在职月内到岗" :value="1" />
                <el-option label="在职考虑机会" :value="2" />
                <el-option label="在职暂不考虑" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="我的优势" prop="personal_advantage">
              <el-input type="textarea" v-model="formData.personal_advantage" placeholder="请输入我的优势" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="求职城市" prop="work_city_id">
              <el-select v-model="formData.work_city_id" clearable filterable placeholder="请选择求职城市">
                <el-option v-for="item in areaList" :label="item.area_name" :value="+item.area_id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="兴趣城市" prop="interested_cities_ids">
              <el-select multiple v-model="formData.interested_cities_ids" clearable filterable
                placeholder="请选择兴趣城市（可多选）">
                <el-option v-for="item in areaList" :label="item.area_name" :value="+item.area_id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标签" prop="label">
              <el-select multiple filterable allow-create v-model="formData.label" clearable placeholder="请输入标签">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最低薪资" prop="money_min">
              <el-input type="number" v-model.number="formData.money_min" placeholder="请输入最低薪资" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高薪资" prop="money_max">
              <el-input type="number" v-model.number="formData.money_max" placeholder="请输入最高薪资" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="industry">
              <el-tree-select ref="treeRef" clearable multiple @check-change="hanldeCheckChange" show-checkbox
                placeholder="请选择行业 (最多3个)" :props="{ label: 'name' }" node-key="id" v-model="formData.industry"
                :data="industryList" :render-after-expand="false" />
            </el-form-item>
          </el-col>


          <el-col :span="24">
            <div class="text-[16px] mt-[30px] mb-[10px] flex items-center">
              <div class="mr-[10px]">工作经历</div>
              <el-button type="primary" @click="addWorkExperience" size="small">新增经历</el-button>
            </div>
            <el-row v-for="(item, index) in formData.work_experience" :key="item.id">
              <el-col :span="24">
                <div class="text-right mb-[20px]" v-if="index !== 0">
                  <el-button type="danger" size="small" @click="removeWorkExperience(index)">删除</el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司" prop="work_experience.name">
                  <el-input type="text" v-model="item.name" placeholder="请输入公司" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否实习" prop="is_sx">
                  <el-radio-group v-model="item.is_sx">
                    <el-radio :value="0">否</el-radio>
                    <el-radio :value="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="在职时间" prop="working_hours_min">
                    <el-date-picker value-format="x" v-model="item.working_hours_min" type="date"
                      placeholder="请选择在职时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="离职时间" prop="working_hours_max" class="!w-[100%]">
                    <el-date-picker value-format="x" v-model="item.working_hours_max" type="date"
                      placeholder="请选择离职时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="plan.department">
                  <el-input type="text" v-model="item.department" placeholder="请输入部门" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位" prop="plan.job_title">
                  <el-input type="text" v-model="item.job_title" placeholder="请输入岗位" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位" prop="plan.job_content">
                  <el-input type="text" v-model="item.job_content" placeholder="请输入职位" />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="掌握技术" prop="having_skills">
                  <el-input type="textarea" v-model="item.having_skills" placeholder="请输入掌握技术" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24">
            <div class="text-[16px] mt-[30px] mb-[10px] flex items-center">
              <div class="mr-[10px]">项目经历</div>
              <el-button type="primary" @click="addProjectExperience" size="small">新增项目</el-button>
            </div>
            <el-row v-for="(item, index) in formData.project_experience" :key="index">
              <el-col :span="24">
                <div class="text-right mb-[20px]" v-if="index !== 0">
                  <el-button type="danger" size="small" @click="removeProjectExperience(index)">删除</el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="项目名称" prop="project_experience.name">
                    <el-input type="text" v-model="item.name" placeholder="请输入项目名称" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="担任角色" prop="role">
                    <el-input type="text" v-model="item.role" placeholder="请输入担任角色" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="开始时间" prop="start_time">
                    <el-date-picker value-format="x" v-model="item.start_time" type="date" placeholder="请选择开始时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="结束时间" prop="end_time" class="!w-[100%]">
                    <el-date-picker value-format="x" v-model="item.end_time" type="date" placeholder="请选择结束时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="项目描述" prop="describe">
                    <el-input type="textarea" v-model="item.describe" placeholder="请输入项目描述" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="项目业绩" prop="achievement">
                    <el-input type="textarea" v-model="item.achievement" placeholder="请输入项目业绩" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24">
            <div class="text-[16px] mt-[30px] mb-[10px] flex items-center">
              <div class="mr-[10px]">教育经历</div>
              <el-button type="primary" @click="addEducation" size="small">新增经历</el-button>
            </div>
            <el-row v-for="(item, index) in formData.education" :key="index">
              <el-col :span="24">
                <div class="text-right mb-[20px]" v-if="index !== 0">
                  <el-button type="danger" size="small" @click="removeEducation(index)">删除</el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学校名称" prop="education.name">
                  <el-input type="text" v-model="item.name" placeholder="请输入学校名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学历" prop="education">
                  <el-select v-model="item.education" clearable filterable placeholder="请选择学历">
                    <el-option label="中专/中技" :value="1" />
                    <el-option label="高中" :value="2" />
                    <el-option label="大专" :value="3" />
                    <el-option label="本科" :value="4" />
                    <el-option label="硕士" :value="5" />
                    <el-option label="博士" :value="6" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否全日制" prop="is_qrz">
                  <el-radio-group v-model="item.is_qrz">
                    <el-radio :value="0">是</el-radio>
                    <el-radio :value="1">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业" prop="major">
                  <el-input type="text" v-model="item.major" placeholder="请输入专业" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="入学时间" prop="start_time">
                    <el-date-picker value-format="x" v-model="item.start_time" type="date" placeholder="请选择入学时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="毕业时间" prop="end_time" class="!w-[100%]">
                    <el-date-picker value-format="x" v-model="item.end_time" type="date" placeholder="请选择毕业时间" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="date-picker">
                  <el-form-item label="在校经历" prop="content">
                    <el-input type="textarea" v-model="item.content" placeholder="请输入在校经历" />
                  </el-form-item>
                </div>
              </el-col>

            </el-row>
          </el-col>

          <el-col :span="24">
            <div class="text-[16px] mt-[30px] mb-[10px] flex items-center">
              <div class="mr-[10px]">相关证书</div>
              <el-button type="primary" @click="addCertificate" size="small">新增证书</el-button>
            </div>
            <el-row v-for="(item, index) in formData.certificate" :key="index">
              <el-col :span="24">
                <div class="text-right mb-[20px]" v-if="index !== 0">
                  <el-button type="danger" size="small" @click="removeCertificate(index)">删除</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="date-picker">
                  <el-form-item label="证书名称" prop="certificate.name">
                    <el-input type="text" v-model="item.name" placeholder="请输入资料名称" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="24">
                <el-form-item label="证书图片">
                  <image-upload v-if="dialog.visible" :limit="1" v-model="item.images" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
defineOptions({
  name: "netwoeking",
  inheritAttrs: false,
});

import NwkAPI, { area, NoticeForm, UserPageQuery, UserPageVO } from "@/api/networking";
import ImageUpload from "@/components/Upload/ImageUpload.vue";
import { formatTimestamp } from '@/utils/index'
const queryFormRef = ref(ElForm);
const formRef = ref(ElForm);
const loading = ref(false);
const removeIds = ref([]);
const total = ref(0);
const pageData = ref<UserPageVO[]>();
const queryParams = reactive<UserPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 用户表单数据
const formData = reactive<NoticeForm>({
  avatar: "",
  avatars: [], // 本地渲染用
  sex: 0, // 性别
  work_experience: [{ // 工作经历
    is_sx: 1
  }],
  project_experience: [{ // 项目经历

  }],
  education: [{ // 教育经历
    name: "", //学校名称
    education: '', //学历 0初中及以下 1中专/中技 2高中 3大专 4本科 5硕士 6博士
    is_qrz: 1, //是否全日制 0是 1否
    major: "", //专业
    start_time: "", //入学时间
    end_time: "", //毕业时间
    content: "" //在校经历
  }],
  certificate: [{
    name: "", //名称
    image: "", //图片
    images: []
  }]
});

// 新增工作经历
const addWorkExperience = () => {
  formData.work_experience.push({
    is_sx: 1
  })
}

// 跳转详情
const handleInfo = (id: number) => {
  router.push({ path: 'workingInfo', query: { id: id } });
}

// 移除工作经历
const removeWorkExperience = (index: number) => {
  formData.work_experience.splice(index, 1);
}

// 新增项目经历
const addProjectExperience = () => {
  formData.project_experience.push({});
}

// 删除项目经历
const removeProjectExperience = (index: number) => {
  formData.project_experience.splice(index, 1);
}

// 新增教育经历
const addEducation = () => {
  formData.education.push({ // 教育经历
    name: "", //学校名称
    education: '', //学历 0初中及以下 1中专/中技 2高中 3大专 4本科 5硕士 6博士
    is_qrz: 1, //是否全日制 0是 1否
    major: "", //专业
    start_time: "", //入学时间
    end_time: "", //毕业时间
    content: "" //在校经历
  })
}

// 移除教育经历
const removeEducation = (index: number) => {
  formData.education.splice(index, 1);
}

// 新增证书
const addCertificate = () => {
  formData.certificate.push({
    name: '',
    image: "", //图片
    images: [], // 本地显示
  })
}

// 移除证书
const removeCertificate = (index: number) => {
  formData.certificate.splice(index, 1);
}

// 提交审核
const handleAudit = (row: { [key: string]: any }, type: string) => {
  ElMessageBox.prompt(
    "请输入用户「" + row.name + "」的审核",
    `${type == 'commit' ? '通过' : '驳回'}`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputType: 'textarea',
    },
  ).then(
    ({ value }) => {
      NwkAPI.getAudit({ id: row.id, type, err_note: value }).then(() => {
        ElMessage.success("操作成功");
        handleResetQuery();
      });
    },
    () => {
      ElMessage.info("已取消");
    }
  );
}

/**  用户弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "",
});

const treeRef = ref(null) as any;
const hanldeCheckChange = (e: any, node: any) => {
  let industryIds = treeRef.value!.getCheckedKeys(false);
  formData.industry = industryIds;
  if (industryIds.length > 3) {
    setTimeout(() => {
      formData.industry = industryIds.slice(0, 3);
    }, 200)
  }
}

/** 用户表单校验规则  */
const rules = reactive({
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  NwkAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.deptId = undefined;
  queryParams.createTime = undefined;
  handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}


/**
 * 打开弹窗
 *
 * @param id 用户ID
 */
async function handleOpenDialog(id?: number) {
  dialog.visible = true;

  if (id) {
    dialog.title = "修改公屏";
    NwkAPI.getFormData({ id }).then((data: any) => {

      data.avatars = data.avatar == "" ? [] : data.avatar.split(',');

      if (data.work_experience) {
        data.work_experience.forEach((item: any) => {
          item.working_hours_min = item.working_hours_min == 0 ? '' : item.working_hours_min * 1000;
          item.working_hours_max = item.working_hours_max == 0 ? '' : item.working_hours_max * 1000;
        })
      }

      if (data.project_experience) {
        data.project_experience.forEach((item: any) => {
          item.end_time = item.end_time == 0 ? '' : item.end_time * 1000;
          item.start_time = item.start_time == 0 ? '' : item.start_time * 1000;
        })
      }

      if (data.education) {
        data.education.forEach((item: any) => {
          item.end_time = item.end_time == 0 ? '' : item.end_time * 1000;
          item.start_time = item.start_time == 0 ? '' : item.start_time * 1000;
        })
      }

      if (data.certificate) {
        data.certificate.forEach((item: any) => {
          item.images = item.image == "" ? [] : item.image.split(',');
        })
      }

      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增公屏";
  }
}

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = undefined;
  formData.work_experience = [];
  formData.project_experience = [];
  formData.education = [];
  formData.certificate = [];
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      const userId = formData.id;

      formData.avatar = formData.avatars.length > 0 ? formData.avatars.join(',') : "";
      formData.work_experience.forEach((item: any) => {
        item.working_hours_min = item.working_hours_min / 1000;
        item.working_hours_max = item.working_hours_max / 1000;
      })
      formData.project_experience.forEach((item: any) => {
        item.end_time = item.end_time / 1000;
        item.start_time = item.start_time / 1000;
      })
      formData.education.forEach((item: any) => {
        item.end_time = item.end_time / 1000;
        item.start_time = item.start_time / 1000;
      })
      formData.certificate.forEach((item: any) => {
        item.image = item.images.length > 0 ? item.images.join(',') : "";
      })

      loading.value = true;
      if (userId) {
        NwkAPI.update(formData)
          .then(() => {
            ElMessage.success("修改成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        NwkAPI.add(formData)
          .then(() => {
            ElMessage.success("新增成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}, 3000);

/** 删除用户 */
function handleDelete(id?: number) {
  const userIds = id ? [id] : removeIds.value;

  if (!userIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除用户?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    function () {
      loading.value = true;
      NwkAPI.deleteByIds({ ids: userIds })
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    function () {
      ElMessage.info("已取消删除");
    }
  );
}

const areaList = ref<area[]>([]);
const industryList = ref([]);
const hanldeAreaList = () => {
  NwkAPI.getAreaList().then(res => {
    areaList.value = res;
  })
  NwkAPI.getIndustryList().then(res => {
    industryList.value = res as any;
  })
};
onMounted(() => {
  handleQuery();
  hanldeAreaList();
});
</script>

<style scoped>
.date-picker :deep(.el-form-item__content),
.date-picker :deep(.el-form-item__content) div {
  width: 100% !important;
}
</style>
